<form (ngSubmit)="query()" [formGroup]="searchForm" class="search-area" fxLayoutGap="16px">
  <mat-form-field floatLabel="never">
    <mat-select [placeholder]="'workshop'|translate" formControlName="workshopId" required>
      <mat-option *ngFor="let workshop of workshops$|async" [value]="workshop.id">
        {{workshop.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <div class="mat-form-field" style="width: 300px;">
    <input [formControl]="rangeCtrl" [owlDateTimeTrigger]="rangePicker" [owlDateTime]="rangePicker" [placeholder]="('Common.startDate'|translate)+' ~ '+('Common.endDate'|translate)" matInput readonly required selectMode="range">
    <owl-date-time #rangePicker></owl-date-time>
  </div>

  <button [disabled]="searchForm.invalid" color="primary" mat-icon-button tabindex="-1">
    <mat-icon>search</mat-icon>
  </button>
</form>

<mat-divider></mat-divider>

<mat-table [dataSource]="infoItems$" fxFlex>
  <ng-container matColumnDef="batch">
    <mat-header-cell *matHeaderCellDef>{{'batchNo'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row.batch.batchNo}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="grade">
    <mat-header-cell *matHeaderCellDef fxLayoutAlign="center center">{{'grade'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row" fxLayoutAlign="center center">{{row.grade.name}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="allDetailInfo">
    <mat-header-cell *matHeaderCellDef>{{'DoffingSilkCarRecordReport.allDetailInfo'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">
      <ng-container *ngTemplateOutlet="detailInfoTemp;context:{detailInfo:row.allDetailInfo}"></ng-container>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="noWeightDetailInfo">
    <mat-header-cell *matHeaderCellDef>{{'DoffingSilkCarRecordReport.noWeightDetailInfo'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">
      <ng-container *ngIf="row.grade.sortBy<100">
        <ng-container *ngTemplateOutlet="detailInfoTemp;context:{detailInfo:row.noWeightDetailInfo}"></ng-container>
      </ng-container>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="toDtyDetailInfo">
    <mat-header-cell *matHeaderCellDef>{{'DoffingSilkCarRecordReport.toDtyDetailInfo'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">
      <ng-container *ngTemplateOutlet="detailInfoTemp;context:{detailInfo:row.toDtyDetailInfo}"></ng-container>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="toDtyConfirmDetailInfo">
    <mat-header-cell *matHeaderCellDef>{{'DoffingSilkCarRecordReport.toDtyConfirmDetailInfo'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">
      <ng-container *ngTemplateOutlet="detailInfoTemp;context:{detailInfo:row.toDtyConfirmDetailInfo}"></ng-container>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="packageBoxDetailInfo">
    <mat-header-cell *matHeaderCellDef>{{'DoffingSilkCarRecordReport.packageBoxDetailInfo'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">
      <ng-container *ngTemplateOutlet="detailInfoTemp;context:{detailInfo:row.packageBoxDetailInfo,s:'packageBoxCount'}"></ng-container>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="diffDetailInfo">
    <mat-header-cell *matHeaderCellDef>{{'DoffingSilkCarRecordReport.diffDetailInfo'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">
      <ng-container *ngTemplateOutlet="detailInfoTemp;context:{detailInfo:row.diffDetailInfo}"></ng-container>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

<ng-template #detailInfoTemp let-detailInfo="detailInfo" let-s="s">
  <!--  <mat-list dense>-->
  <!--    <mat-list-item>{{detailInfo.items.length}}</mat-list-item>-->
  <!--    <mat-list-item>{{detailInfo.silkCount}}</mat-list-item>-->
  <!--    <mat-list-item>{{detailInfo.netWeight|number:'.3-3'}}</mat-list-item>-->
  <!--  </mat-list>-->
  <mat-list dense>
    <mat-list-item>
      <div fxLayout fxLayoutGap="16px" matLine>
        <span>{{(s || 'silkCar')|translate}}</span>
        <span>{{detailInfo.items.length}}</span>
      </div>
    </mat-list-item>
    <mat-list-item>
      <div fxLayout fxLayoutGap="16px" matLine>
        <span>{{'silkCount'|translate}}</span>
        <span>{{detailInfo.silkCount}}</span>
      </div>
    </mat-list-item>
    <mat-list-item>
      <div fxLayout fxLayoutGap="16px" matLine>
        <span>{{'netWeight'|translate}}</span>
        <span>{{detailInfo.netWeight|number:'.3-3'}}</span>
      </div>
    </mat-list-item>
  </mat-list>
  <!--      <div fxLayout fxLayoutGap="16px">-->
  <!--        <span>{{row.allDetailInfo.items.length}}</span>-->
  <!--        <span>{{row.allDetailInfo.netWeight}}</span>-->
  <!--        <span>{{row.allDetailInfo.silkCount}}</span>-->
  <!--      </div>-->
</ng-template>
